<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/axios.min.js"></script>
  <script src="/js/query.js"></script>
  <script src="/class/js/class.js"></script>
  <style>
    body{
      display: flex;
      flex-wrap: wrap;
    }

    .table{
      width: 100%;
      height: auto;
      border: 1px solid blueviolet;
    }
    .button{
      width: 100%;
      display: flex;
      justify-content: space-around;
    }

    .addClass{
      background-color: rgba(255,0,0,0.2);
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: hidden
    }

    .content{
      border: 3px solid #000;
      width: 400px;
      height: 300px;
      padding: 50px;
      background-color: white;
      display: flex;
      flex-wrap: wrap;
    }

    .content div{
      margin-top: 10px;
      margin-bottom: 10px;
      width: 400px;
      height: 40px;
    }


    .content>div:first-child{
      display: flex;
      justify-content: center;
    }

    .content>div:last-child{
      display: flex;
      justify-content: space-around;
      height: 30px;
    }

    .content>div:first-child>h3{
      margin: 0;
    }
    .button12 {
      width:100px;
      height: 30px;
      text-align:center;
      line-height:100%;
      padding:0.3em;
      font:16px Arial,sans-serif bold;
      font-style:normal;
      text-decoration:none;
      margin:2px;
      vertical-align:text-bottom;
      zoom:1;
      outline:none;
      font-size-adjust:none;
      font-stretch:normal;
      border-radius:50px;
      box-shadow:0px 1px 2px rgba(0,0,0,0.2);
      text-shadow:0px 1px 1px rgba(0,0,0,0.3);
      color:#fefee9;
      border:0.2px solid #2299ff;
      background-repeat:repeat;
      background-size:auto;
      background-origin:padding-box;
      background-clip:padding-box;
      background-color:#3399ff;
      background: linear-gradient(to bottom, #eeeff9 0%,#3399ff 100%);
    }

    .button12:hover {
      background: #268DFF;
    }
  </style>

</head>
<body>

<table class="table" cellspacing="0">
  <thead><tr><th>班级名称</th><th>开班时间</th><th>带班老师</th><th>操作</th></tr></thead>
  <tbody id="data" style="text-align: center"></tbody>
</table>

<div class="button">
  <input type="button" value="添加班级" onclick="add()" class="button12">
</div>

<div class="addClass" id="addClass">
  <div class="content">
    <div><h3>班级添加</h3></div>
    <div>班级名称：<input type="text" name="className" id="className"></div>
    <div>带班老师：<input type="text" name="classTeacher" id="classTeacher"></div>
    <div>开班时间: <input type="date" name="classDay" id="classDay"></div>
    <div>
      <input type="button" value="添加" onclick="addClass()" class="button12">
      <input type="button" value="取消" onclick="cancel()" class="button12">
    </div>
  </div>
</div>

<div class="addClass" id="del">
  <div class="content">
    <div style="width: 300px"><span style="color:red;text-align: center ;align-items: center">该班级还有学生</span></div>

    <div><input type="button" value="确定" onclick="sure()" class="button12"></div>
    </div>
  </div>
</body>
</html>